<template lang="html">
  <div class="tab_container">

      <div class="table_box">
          <div class="th check_th">
            <el-checkbox @change="onCheckAll" v-model="checkAll"></el-checkbox>
          </div>
          <div class="t_head">
              <div class="th" :style="{width:item.width, flex: isNone(item.width)}" v-for="(item,index) in tInData" v-if="item.title" :key="index">{{item.title}}</div>
          </div>

          <div class="t_body">
            <div class="tr" v-show="tableData.length>0" v-for="(row,index) in tableData" :key="index">
                <div class="title">
                    <div class="t_check">
                        <el-checkbox @change="onCheck(index,$event)" v-model="checkededededed[index]" ref='el_check'></el-checkbox>
                    </div>
                    <div class="t1">订单编号：{{row[tInData[0].props]}}</div>
                    <div class="t2">创建日期：{{row[tInData[1].props] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="t2" v-if="tInData[2].props && tInData[2].props=='auditSuccessTime'">审核日期：{{row[tInData[2].props] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="t2" v-if="tInData[2].props && tInData[3].props=='reminderShipmentTime' && row[tInData[3].props]">提醒日期：{{row[tInData[3].props] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="t2" v-if="date">{{tInData[2].name}}：{{row[tInData[2].props] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="t2" v-if="date2">{{tInData[3].name}}：{{row[tInData[3].props]}}</div>
                    <div class="t2" v-show="filters1(tInData)">返厂日期：{{row['returnSendTime'] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                    <div class="t2" v-show="filters2(tInData)">到货日期：{{row['checkSuccessTime'] | datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
                </div>
                <div class="td" ref="td" :style="{height}">
                    <div class="item" :style="{width: colum.width, flex: isNone(colum.width)}" v-for="(colum,index) in tInData" v-if="colum.title" :key="index">
                        <span v-if="colum.props">{{row[colum.props]}}</span>
                        <slot :name="colum.title" :row="row"></slot>
                    </div>
                </div>
            </div>

            <div class="no_data" v-show="tableData.length == 0">
              暂无数据
            </div>

          </div>

      </div>
  </div>
</template>

<script>
export default {
  name: 'vTable',
  data(){
    return {
      height: '',
      checkededededed: [],
      checkAll:false
    }
  },
  props: ['tableData','tInData','date','date2'],
  watch:{
    tableData(){
      this.$nextTick(function(){
        this.calcElementHeight();
      })
    }
  },
  mounted(){
      this.calcElementHeight();
  },
  methods: {
    calcElementHeight(){
      if(this.$refs['td'] && this.$refs['td'].length !== 0){
        this.height = this.$refs['td'][0].offsetHeight + 'px';
      }
    },
    isNone(w){
      return w?"none":1;
    },
    onCheckAll(e){
      if(!this.$refs['el_check']){
        this.checkAll = false;
        return false;
      }
      this.$refs['el_check'].forEach((el,i)=>{
        if(e){
          this.checkededededed[i] = true;
        }else{
          this.checkededededed[i] = false;
        }
      })
      this.$forceUpdate()
      this.$emit('onCheckAll',{status: e})
    },
    onCheck(i,e){
      if(e){
        this.checkededededed[i] = true;
      }else{
        this.checkededededed[i] = false;
        this.checkAll = false;
      }
      this.$forceUpdate()
      this.$emit('onCheck',{index:i, status:e})
    },
    filters1: function (value) {
        if(!value) return '';
        var flag = "";
        for(var i in value){
            if(value[i].props &&　value[i].props=="returnSendTimeAAAA"){
                flag = true;
                break;
            }
        }
        console.log(flag);
        return flag;
    },
    //到货日期
    filters2: function (value) {
        if(!value) return '';
        var flag = "";
        for(var i in value){
            if(value[i].props &&　value[i].props=="checkSuccessTimeAAAA"){
                flag = true;
                break;
            }
        }
        return flag;
    }
  },
}
</script>

<style lang="css" scoped>
.tab_container{
  overflow-x: auto;
}
.table_box{
  display: inline-block;
  min-width: 100%;
  box-sizing: border-box;
  position: relative;
}
.t_head {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  background: #F0F0F0;
  border-radius: 4px;
  border: 1px solid #E8E8E8;
  height: 40px;
  line-height: 40px;
  margin-bottom: 8px;
  position: relative;
  -moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.table_box .th{
  min-width: 80px;
  color: #666666;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  flex:1;
}
.table_box .check_th{
  min-width: auto;
  width: 30px;
  position: absolute;
  height: 40px;
  line-height: 40px;
}
.t_body{
  width: 100%;

}
.t_body .no_data{
  width: 100%;
  font-size: 12px;
  color: #999;
  text-align: center;
  padding: 30px 0;
}
.t_body .tr{
  width: 100%;
  padding-bottom: 8px;
}
.t_body .title{
  width: 100%;
  line-height: 36px;
  height: 36px;
  background: #DAEBFF;
  box-sizing: border-box;
  display: flex;
}
.title .t_check{
  width: 30px;
  text-align: center;
  margin-right: 20px;
}
.title .t1,.title .t2{
  margin-right: 30px;
  font-size: 12px;
  color: #666;
}
.t_body .td{
  border-left: 1px solid #E8E8E8;
  border-bottom: 1px solid #E8E8E8;
  display: flex;
  align-items: center;
}
.t_body .td .item{
  height: 100%;
  border-right: 1px solid #E8E8E8;
  text-align: center;
  padding: 15px 0;
  font-size: 12px;
  flex: 1;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
</style>
